<template>
    <div class="message-swiper-wrapper">
        <div class="container">
            <van-swipe :autoplay="3000" style="height:.38rem;" vertical :show-indicators="false" @change="change">
                <van-swipe-item v-for="(item,index) in random" :key="index">
                    <div class="text">ID:{{item.id}}
                    <!-- {{$t('invitedSwipe')(item.num)}} -->
                    {{$t('invited ${num} friends and got',[{msg:'$m',val:'invitedSwipe'}])}}
                    &nbsp;<span>{{vueState.countryInfo.currencySymbol}}{{item.money}}!</span></div>
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>
</template>
<script>
import {randomInt} from '../../utils/common.js'
import {onMounted, reactive, toRefs,inject} from 'vue'
export default {
    setup(props) {
        const vueState = inject('vueState')
        const state = reactive({
            random:[{},{}]
        })
        const change = (index)=> {
            const num = randomInt(1,20)
            state.random[index] = {id:`${randomInt(10,99)}*****${randomInt(0,9)}`,num:num,money:num*randomInt(5,10)}
        }
        onMounted(()=>{
            change(0)
        })
        return {
            vueState,
            ...toRefs(state),
            change
        }
    }
}
</script>
<style lang="less" scoped>
.message-swiper-wrapper{
    height: .38rem;
    width: 100%;
    background: linear-gradient(180deg,rgba(0,0,0,0.70), rgba(0,0,0,0.00));
    .container{
        padding: 0 .16rem;
        .text{
            height: .38rem;
            display: flex;
            align-items: center;
            font-size: .14rem;
            font-weight: 500;
            color: white;
            &>span{
                color:#FFE096;
            }
        }
    }
}
</style>